<template>
  <view class="container">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <text class="iconfont icon-back" @tap="goBack">←</text>
      <text class="title">我的收藏</text>
    </view>

    <!-- 收藏列表 -->
    <view class="favorites-list" v-if="favorites.length > 0">
      <view class="photographer-card" v-for="(item, index) in favorites" :key="index" @tap="goToDetail(item.id)">
        <view class="card-image">
          <image :src="item.coverImage" mode="aspectFill"></image>
          <view :class="['status-tag', item.status === '空闲中' ? 'status-free' : 'status-busy']">
            {{ item.status }}
          </view>
        </view>
        <view class="card-content">
          <view class="photographer-info">
            <image :src="item.avatar" class="avatar"></image>
            <view class="info">
              <text class="name">{{ item.name }}</text>
              <view class="rating">
                <text class="iconfont icon-star">⭐</text>
                <text>{{ item.rating }} ({{ item.ratingCount }})</text>
              </view>
            </view>
          </view>
          <view class="card-footer">
            <text class="tag">{{ item.tag }}</text>
            <text class="price">¥{{ item.price }}起</text>
          </view>
          <view class="action-buttons">
            <view class="action-btn" @tap.stop="removeFavorite(item.id)">
              <text class="action-icon">❌</text>
              <text class="action-text">取消收藏</text>
            </view>
            <view class="action-btn" @tap.stop="bookNow(item.id)">
              <text class="action-icon">📅</text>
              <text class="action-text">立即预约</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-else>
      <image src="/static/images/empty-favorite.png" class="empty-image"></image>
      <text class="empty-text">您还没有收藏任何摄影师</text>
      <button class="empty-btn" @tap="goToHome">去发现摄影师</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      favorites: [
        {
          id: 1,
          name: '小明摄影',
          avatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80',
          coverImage: 'https://images.unsplash.com/photo-1581318694548-0fb6e47fe59b?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80',
          rating: 4.9,
          ratingCount: '125条评价',
          status: '空闲中',
          tag: 'Cosplay',
          price: 199
        },
        {
          id: 3,
          name: '小蓝摄影',
          avatar: 'https://images.unsplash.com/photo-1599566150163-29194dcaad36?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80',
          coverImage: 'https://images.unsplash.com/photo-1551854638-3c5e37b89952?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80',
          rating: 4.7,
          ratingCount: '87条评价',
          status: '空闲中',
          tag: '汉服',
          price: 249
        }
      ]
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    
    goToDetail(id) {
      // 跳转到摄影师详情页
      uni.navigateTo({
        url: `/pages/photographer/photographer?id=${id}`
      });
    },
    
    removeFavorite(id) {
      uni.showModal({
        title: '取消收藏',
        content: '确定要取消收藏该摄影师吗？',
        success: (res) => {
          if (res.confirm) {
            // 模拟取消收藏操作
            this.favorites = this.favorites.filter(item => item.id !== id);
            uni.showToast({
              title: '已取消收藏',
              icon: 'success'
            });
          }
        }
      });
    },
    
    bookNow(id) {
      // 跳转到预约页面
      uni.navigateTo({
        url: `/pages/booking/booking?id=${id}`
      });
    },
    
    goToHome() {
      // 跳转到首页
      uni.switchTab({
        url: '/pages/home/home'
      });
    }
  }
}
</script>

<style>
.container {
  padding: 0;
  background-color: #F5F5F5;
  min-height: 100vh;
}

.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #fff;
  position: relative;
}

.icon-back {
  font-size: 40rpx;
  color: #333;
}

.title {
  font-size: 32rpx;
  font-weight: 500;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.favorites-list {
  padding: 20rpx;
}

.photographer-card {
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.card-image {
  position: relative;
  height: 300rpx;
}

.card-image image {
  width: 100%;
  height: 100%;
}

.status-tag {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
}

.status-free {
  background-color: #10B981;
  color: #fff;
}

.status-busy {
  background-color: #F59E0B;
  color: #fff;
}

.card-content {
  padding: 20rpx;
}

.photographer-info {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 16rpx;
}

.info {
  flex: 1;
}

.name {
  font-size: 30rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 6rpx;
}

.rating {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #666;
}

.icon-star {
  margin-right: 6rpx;
  color: #FBBF24;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.tag {
  font-size: 24rpx;
  color: #8B5CF6;
  background-color: #F3F4F6;
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
}

.price {
  font-size: 28rpx;
  color: #EF4444;
  font-weight: 500;
}

.action-buttons {
  display: flex;
  justify-content: space-between;
  border-top: 1rpx solid #F3F4F6;
  padding-top: 16rpx;
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.action-icon {
  font-size: 28rpx;
  margin-right: 8rpx;
}

.action-text {
  font-size: 24rpx;
  color: #666;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.empty-image {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #6B7280;
  margin-bottom: 30rpx;
}

.empty-btn {
  background-color: #8B5CF6;
  color: #fff;
  font-size: 28rpx;
  padding: 15rpx 40rpx;
  border-radius: 40rpx;
}
</style>